<template>
    <div>
      <!-- 显示所有卡片 -->
      <section>
        <span>卡片列表</span> <span><button @click="" class="" >刷新</button></span>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>URL</th>
              <th>照片 URL</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="card in cards" :key="card.cardId">
              <td>{{ card.cardId }}</td>
              <td>{{ card.url }}</td>
              <td>
                <img :src="card.photoUrl" alt="Card Image" style="max-width: 100px; max-height: 100px;">
              </td>
              <td class="card-actions">
                <button @click="editCard(card)">编辑</button>
                <button @click="deleteCard(card.cardId)" class="delete">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </section>
  
      <!-- 添加卡片表单 -->
      <section v-if="isEditing || isAddingNewCard">
        <h2>{{ isEditing ? '编辑卡片' : '添加新卡片' }}</h2>
        <form @submit.prevent="saveCard">
          <label for="url">URL</label>
          <input type="url" id="url" v-model="cardForm.url" placeholder="输入卡片的 URL" required>
  
          <label for="photoUrl">照片 URL</label>
          <input type="url" id="photoUrl" v-model="cardForm.photoUrl" placeholder="输入照片的 URL" required>
          
          <!-- 图片预览 -->
          <div v-if="cardForm.photoUrl">
            <img :src="cardForm.photoUrl" alt="Preview" style="max-width: 200px; max-height: 200px; margin-top: 10px;">
          </div>
  
          <button type="submit">{{ isEditing ? '更新卡片' : '添加卡片' }}</button>
          <button @click="resetForm" type="button" class="cancel-button">取消</button>
        </form>
      </section>
  
      <!-- 添加新卡片按钮 -->
      <button @click="startAddingCard" class="add-card-button" v-if="!isEditing && !isAddingNewCard">添加新卡片</button>
    </div>
  </template>
  
  <script>
  import { fetchCards, addCard, updateCard, deleteCard } from '@/common/api';  // 导入 API 函数
  
  export default {
    data() {
      return {
        cards: [],
        cardForm: { url: '', photoUrl: '' },
        isEditing: false,
        isAddingNewCard: false,
        editingCardId: null,
      };
    },
    created() {
      this.loadCards();  // 加载卡片数据
    },
    methods: {
      // 加载卡片列表
      async loadCards() {
        try {
          this.cards = await fetchCards();  // 使用 api.js 中封装的 fetchCards
        } catch (error) {
          console.error('加载卡片失败:', error);
        }
      },
  
      // 保存或更新卡片
      async saveCard() {
        // 校验表单是否有效
        if (!this.cardForm.url || !this.cardForm.photoUrl) {
          alert('URL和照片 URL 都是必填项');
          return;
        }
  
        try {
          if (this.isEditing) {
            await updateCard(this.editingCardId, this.cardForm);  // 使用 updateCard
          } else {
            await addCard(this.cardForm);  // 使用 addCard
          }
          this.resetForm();
          this.loadCards();  // 刷新卡片列表
        } catch (error) {
          console.error('保存卡片失败:', error);
        }
      },
  
      // 编辑卡片
      editCard(card) {
        this.isEditing = true;
        this.cardForm = { url: card.url, photoUrl: card.photoUrl };
        this.editingCardId = card.cardId;
      },
  
      // 删除卡片
      async deleteCard(cardId) {
        try {
          await deleteCard(cardId);  // 使用 deleteCard
          this.loadCards();  // 刷新卡片列表
        } catch (error) {
          console.error('删除卡片失败:', error);
        }
      },
  
      // 启动添加新卡片
      startAddingCard() {
        this.isAddingNewCard = true;
      },
  
      // 重置表单
      resetForm() {
        this.cardForm = { url: '', photoUrl: '' };
        this.isEditing = false;
        this.isAddingNewCard = false;
        this.editingCardId = null;
      },
    },
  };
  </script>
  
  <style scoped>
  /* 页面整体布局 */
  h1 {
    text-align: center;
    margin: 20px 0;
    font-size: 2rem;
    color: #333;
  }
  
  /* 表格样式 */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
  }
  
  th, td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
  }
  
  th {
    background-color: #f4f4f4;
    font-weight: bold;
  }
  
  button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  button:hover {
    background-color: #007bff;
    color: white;
  }
  
  button:active {
    background-color: #0056b3;
  }
  
  /* 添加新卡片按钮 */
  .add-card-button {
    background-color: #17a2b8;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    margin-top: 20px;
    transition: background-color 0.3s ease;
  }
  
  .add-card-button:hover {
    background-color: #138496;
  }
  
  /* 表单样式 */
  form {
    display: flex;
    flex-direction: column;
    width: 300px;
    margin: 0 auto;
  }
  
  form input {
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  form button {
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  form button:hover {
    background-color: #0056b3;
  }
  
  .cancel-button {
    background-color: #dc3545;
    margin-top: 10px;
  }
  
  .cancel-button:hover {
    background-color: #c82333;
  }
  
  /* 图片预览样式 */
  img {
    max-width: 100px;
    max-height: 100px;
    margin-top: 10px;
  }
  </style>
  